<template>  
	<div class="Echarts">
	    <div id="main" >
			<div ref="myChart" id="myChart"  class="round" style="width: 418.48px;height:267.06px;">
			</div>
		</div>
	</div>
</template>
 
<script>
	export default {
		name: 'capital4',
		data() {
			return{
				cockpitData:[]
			}
		},
		mounted() {
			this.getList()
			
		},
		methods: {
			async getList(){
				var dt = {
					"params": {
						"normGuid": "5b35e904-9e4e-4728-b1f9-c1a64b1e3f9d",
						"fieldList": [ {
							"key": "area",
							"value": "宁波"
						}, {
							"key": "mapping_code",
							"value": "稀土永磁"
						}]
					}
				};
				var _this = this;
				const aaa = await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...aaa}
				_this.cockpitData=result.cockpitData
				_this.$nextTick(()=>{
					_this.myEcharts();
				})
			},
			myEcharts(){
				// console.log(this.cockpitData)
				// let myData = [ 'E轮','D轮', 'C轮', 'B轮','A轮','天使轮'];
				// let dataCh = [ 4, 4, 4, 6, 6, 6];
				// let dataJp = [ 11.78, 18, 18, 16, 20, 20];
				let myData=this.cockpitData.map(item=>{
					return item.process
				})
				let dataCh=this.cockpitData.map(item=>{
					return item.rznum
				})
				let dataJp=this.cockpitData.map(item=>{
					return item.rzje
				})
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
				//配置图表
				if (myChart==null) {
					myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
					
				}
				let dataList = [];
				for (var i=0;i<myData.length;i++) {
					dataList.push({
							value: myData[i],
							textStyle:{
								fontSize:15,
								fontWeight:600,
								color:'#DFF8FF',
								align: "center",
								lineOverflow:'none',
							},
						});
				}
				
				var option = {
					// backgroundColor: 'rgba(3, 16, 38, 0.71)',//'#071020',
					tooltip: {
						show: false,
					},
					legend: {
						show: true,
						top:'11%',
						left:'20%',
						itemHeight: 10,
						itemWidth: 10,
						itemGap:25,
						// symbolRotate: 'inherit',
						textStyle:{
							color:'#DFF8FF',
							fontSize:15,
						},
					},
					title:{
						show:false
						// x: '60%',
						// y: 0,
						// subtext: '统计时间：'+ctime,
						// subtextStyle:{
						// 	fontSize: 15,
						// 	color:'#B7B7B7',
						// }
					},
					grid: [
					{
						left: '2%',
						top: '23%',
						bottom: '8%',
						containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
						width: '15%', // grid 组件的宽度。默认自适应。
					}, 
					{
						show: false, 
						left: '22%',
						top: '23%',
						bottom: '8%',
						width: '30%',
					},
					 {
						show: false, // 右侧
						left: '53%',
						top: '23%',
						bottom: '8%',
						containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
						width: '30%', // grid 组件的宽度。默认自适应。
					}, 
					],
					// X轴线配置
					xAxis: [
					{ // 区域
						gridIndex: 0,
						show: false, // 不显示X轴
					},
					{ // 区域
						gridIndex: 1, // x 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
						type: 'value', // 轴线类型: 数值轴
						position: 'top', // 轴线位置(此处位于顶部)
						inverse: true, // 是否是反向坐标轴.[ default: false ]
						axisLine: {
							show: false, // 轴线不显示
						},
						axisTick: {
							show: false, // 轴线刻度不显示
						},
						axisLabel: { // 轴线刻度标签
							show: false,
						},
						splitLine: { // 垂直于X轴的分隔线
							show: false,
						},
					},
					{ // 区域
						gridIndex: 2,
						type: 'value',
						position: 'top',
						inverse: false, // 是否是反向坐标轴.[ default: false ]
						axisLine: {
							show: false, // 轴线不显示
						},
						axisTick: {
							show: false, // 轴线刻度不显示
						},
						axisLabel: { // 轴线刻度标签
							show: false,
						},
						splitLine: { // 垂直于X轴的分隔线
							show: false,
						},
					}, 
					],
					// Y轴线配置
					yAxis: [
					{
						gridIndex: 0, // 中间区域
						type: 'category',
						boundaryGap: true,
						inverse: true,
						position: 'left', // y轴的位置。'left' or 'right'
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						data: dataList,
						
					},{ // 左侧区域
						gridIndex: 1, // y 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
						type: 'category', // 轴线类型: 类目轴
						// 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
						boundaryGap: true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
						inverse: true, // 是否是反向坐标轴.[ default: false ]
						// position: 'left', // y轴的位置。'left' or 'right'
						axisLine: {
							show: false,
							// show: true, // y轴线不显示
							// lineStyle:{
							// 	type:'dotted',
							// 	color:'#556468',
							// 	width:1
							// }
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: false, // 刻度标签不显示
						},
						data: myData // Y轴(这里是类目轴)的类目数据
					},
					{ // 右侧区域
						gridIndex: 2,
						type: 'category',
						boundaryGap: true,
						inverse: true,
						position: 'left',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
						data: myData
					},
					],
					series: [{
						name: '融资事件数量(起)', // 系列名称
						nameTextStyle: {
						    color: "#DFF8FF",
							fontSize:14
						},
						type: 'bar',
						barGap: 19, // 柱间距离
						barWidth: 16, 
						xAxisIndex: 1, // 对应在X轴的grid索引
						yAxisIndex: 1, // 对应在Y轴的grid索引
						label: {
							show: true,
							position: 'left',
							textStyle: { // 柱子上数字样式
								color: '#81E3D3',
								fontSize: 15,
							},
						},
						itemStyle: { // 柱条样式。
							color:new this.$echarts.graphic.LinearGradient(0, 0, 1, 0,
							  [{
								offset: 0, color: 'rgba(86, 115, 159, 0.45)' // 0% 处的颜色
								}, {
								offset: 1, color: 'rgba(78, 144, 255, 1)' // 100% 处的颜色
							  }]),
						},
						data: dataCh, // 系列中的数据内容数组
					},
					{
						name: '披露融资金额(亿元)', // 系列名称
						nameTextStyle: {
						    color: "#DFF8FF",
							fontSize:14
						},
						type: 'bar',
						barGap: 19, // 柱间距离
						barWidth: 16, // 女士柱子宽度
						xAxisIndex:2, // 对应在X轴的grid索引
						yAxisIndex: 2, // 对应在Y轴的grid索引
						label: {
							show: true,
							position: 'right',
							textStyle: { // 柱子上数字样式
								color: '#e9f7f2',
								fontSize: 15,
							},
						},
						itemStyle: { // 柱条样式。
							color:new this.$echarts.graphic.LinearGradient(0, 0, 1, 0,
							  [{
								offset: 0, color: '#0535BA' // 0% 处的颜色
							  }, {
								offset: 1, color: '#00F6FF' // 100% 处的颜色
							  }]),
						},
						data: dataJp, // 系列中的数据内容数组
					}
					]
				};
				myChart.setOption(option);
			}
		}
	}	
</script>

<style>
</style>
